<template>
  <div class="player">
    <audio
      :src="`https://music.163.com/song/media/outer/url?id=${$root.musicStore.musicID}.mp3`"
      autoplay
      @timeupdate="timeUpdate"
      @pause="pause"
      @play="play"
      ref="audio"
      @ended="nextSong"
    ></audio>
    <div class="playBar" v-if="$root.musicStore.musicID">
      <i ref="randImg">
        <img
          :src="
            $root.musicStore.picURL + '?imageView=1&type=webp&thumbnail=253x0'
          "
        />
      </i>
      <i @click="isFullPage = true">{{ $root.musicStore.currentMusic.name }}</i>
      <i>
        <canvas
          @click="changePlay"
          height="50"
          width="50"
          ref="processBtn"
        ></canvas>
      </i>
    </div>
    <div class="fullPage" v-if="isFullPage">
      <div class="playbg">
        <img :src="$root.musicStore.picURL" />
        <div class="cover"></div>
      </div>
      <p @click="isFullPage = false">《 返回</p>
      <div class="changePage">
        <span @click="gequPage = true" :class="{ changeActive: gequPage }"
          >歌曲</span
        >
        <span @click="gequPage = false" :class="{ changeActive: !gequPage }"
          >歌词</span
        >
      </div>
      <!-- 歌曲 -->
      <div class="gequ" v-if="gequPage">
        <div ref="songImg" class="songImg" :class="{ budong: isPlay }">
          <img
            :src="
              $root.musicStore.picURL + '?imageView=1&type=webp&thumbnail=253x0'
            "
          />
        </div>
        <div class="songName">{{ $root.musicStore.currentMusic.name }}</div>
        <div class="artist" v-if="$root.musicStore.currentMusic.song">
          歌手：{{ $root.musicStore.currentMusic.song.artists[0].name }}
        </div>
        <div class="source" v-if="$root.musicStore.currentMusic.al">{{ $root.musicStore.currentMusic.al.name }}</div>
      </div>
      <!-- 歌词 -->
      <div class="geci" v-if="!gequPage">
        <div class="songName">{{ $root.musicStore.currentMusic.name }}</div>
        <div class="lyric" v-if="lyric">
          <ul :style="{ transform: transY }">
            <li
              v-for="(l, index) in lyric"
              :key="index"
              :class="{ active: currentIndex == index }"
            >
              {{ l.lyric }}
            </li>
          </ul>
        </div>
      </div>

      <!-- 进度条 -->
      <div class="progress" scoped>
        <span v-if="!currentTime">00:00</span>
        <span v-if="currentTime">{{ currentTime | formatTime }}</span>
        <input
          type="range"
          min="0"
          :max="duration"
          :value="currentTime"
          @change="changeTime"
        />
        <span v-if="!currentTime">00:00</span>
        <span v-if="currentTime">{{ duration | formatTime }}</span>
      </div>
      <!-- 播放/暂停 -->
      <div class="controlBar">
        <button class="bofang" @click="shunxu = !shunxu">
          <i v-show="shunxu"><img src="../assets/images/shunxu.png" /></i>
          <i v-show="!shunxu"><img src="../assets/images/suiji.png" /></i>
        </button>
        <button @click="preSong" class="pre">
          <i>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="40"
              height="40"
              fill="currentColor"
              class="bi bi-skip-backward"
              viewBox="0 0 16 16"
            >
              <path
                d="M.5 3.5A.5.5 0 0 1 1 4v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v2.94l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L8.5 8.752v2.94c0 .653-.713.998-1.233.696L1 8.752V12a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm7 1.133L1.696 8 7.5 11.367V4.633zm7.5 0L9.196 8 15 11.367V4.633z"
              />
            </svg>
          </i>
        </button>
        <button @click="changePlay" class="changeplay">
          <i v-if="!isPlay">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="50"
              height="50"
              fill="currentColor"
              class="bi bi-play"
              viewBox="0 0 16 16"
            >
              <path
                d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"
              />
            </svg>
          </i>
          <i v-if="isPlay">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="50"
              height="50"
              fill="currentColor"
              class="bi bi-pause"
              viewBox="0 0 16 16"
            >
              <path
                d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z"
              />
            </svg>
          </i>
          <!-- <i>{{ isPlay ? "||" : "▶" }}</i> -->
        </button>
        <button @click="nextSong" class="next">
          <i>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="40"
              height="40"
              fill="currentColor"
              class="bi bi-skip-forward"
              viewBox="0 0 16 16"
            >
              <path
                d="M15.5 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V8.752l-6.267 3.636c-.52.302-1.233-.043-1.233-.696v-2.94l-6.267 3.636C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696L7.5 7.248v-2.94c0-.653.713-.998 1.233-.696L15 7.248V4a.5.5 0 0 1 .5-.5zM1 4.633v6.734L6.804 8 1 4.633zm7.5 0v6.734L14.304 8 8.5 4.633z"
              />
            </svg>
          </i>
        </button>
        <button @click="showPlayList = !showPlayList" class="songsheet">
          <i>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="25"
              height="25"
              fill="currentColor"
              class="bi bi-music-note-list"
              viewBox="0 0 16 16"
            >
              <path
                d="M12 13c0 1.105-1.12 2-2.5 2S7 14.105 7 13s1.12-2 2.5-2 2.5.895 2.5 2z"
              />
              <path fill-rule="evenodd" d="M12 3v10h-1V3h1z" />
              <path
                d="M11 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 16 2.22V4l-5 1V2.82z"
              />
              <path
                fill-rule="evenodd"
                d="M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"
              />
            </svg>
          </i>
        </button>
      </div>

      <!-- 播放列表 -->
      <div class="playList" v-show="!showPlayList">
        <p @click="showPlayList = !showPlayList">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-arrows-angle-contract"
            viewBox="0 0 16 16"
          >
            <path
              fill-rule="evenodd"
              d="M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707zM15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707z"
            />
          </svg>
        </p>
        <h5>播放队列</h5>
        <ul>
          <li
            v-for="v in $root.musicStore.musicList"
            :key="v.id"
            :style="{
              color: v.id == $root.musicStore.musicID ? '#d464f0' : '',
            }"
            @click="playMusic(v)"
          >
            <div class="sheetStyle">
              <h4 class="nameStyle">{{ v.name }}</h4>
              <p class="detailStyle">
                <i class="u-hmsprt"></i>
                <template v-if="v.song">
                  {{
                    v.song.artists[0].name
                      ? v.song.artists[0].name
                      : v.artists[0].name
                  }}
                </template>
                --
                {{ v.name }}
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Play",
  data() {
    return {
      isPlay: true,
      isFullPage: false,
      duration: 0,
      currentTime: 0,
      showPlayList: true,
      lyric: null,
      currentIndex: 0, //记录当前歌词播放的位置下标
      transY: "translateY(0px)",
      songSheetDetail: [],
      shunxu: true,
      gequPage: true,
    };
  },
  created() {
    this.songSheetDetail = this.$root.musicStore.musicList;
    // console.log(this.$root.musicStore.currentMusic);
    // console.log(this.$root.musicStore);
    // console.log(this.$refs.songImg);
  },
  computed: {
    musicIDS() {
      let musicID = this.$root.musicStore.musicID;
      return musicID;
    },
  },
  watch: {
    musicIDS(musicID) {
      // let musicID = this.musicStore.musicID;
      this.$http
        // .get("http://music.kele8.cn/lyric?id=" + musicID)
        .get("/lyric?id=" + musicID)
        .then((data) => {
          if (data.data.nolyric) {
            this.lyric = [];
            return false;
          }
          let lyricArr = [];
          if (data.data.lrc) {
            lyricArr = data.data.lrc.lyric.split("\n");
          }
          lyricArr.pop();
          let reg = /\[(\d+):(\d+)\.\d+\](.*)/;
          let newLyric = lyricArr.map((d) => {
            if (reg.test(d)) {
              return {
                time: parseInt(RegExp.$1 * 60) + parseFloat(RegExp.$2),
                lyric: RegExp.$3,
              };
            }
          });

          this.lyric = newLyric;
        });
    },
  },
  filters: {
    formatTime(val) {
      let minutes = parseInt((val % (60 * 60)) / 60);
      let seconds = parseInt(val % 60);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + ":" + seconds;
    },
  },
  methods: {
    playMusic(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
    },
    changeSong() {
      let currentIndex = 0;
      let musicList = this.$root.musicStore.musicList;

      for (let i in musicList) {
        if (musicList[i].id == this.$root.musicStore.musicID) {
          currentIndex = i;
          break;
        }
      }
      return currentIndex;
    },
    preSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;
      if (this.shunxu) {
        currentIndex--;
      } else {
        // 随机播放
        let random = parseInt(
          Math.random() * this.$root.musicStore.musicList.length
        );
        currentIndex = random;
      }

      if (currentIndex < 0) {
        currentIndex = musicList.length - 1;
      }
      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex];
      this.$root.musicStore.picURL = this.$root.musicStore.currentMusic.al.picUrl;
      // console.log(this.$root.musicStore.currentMusic);
    },
    nextSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;

      if (this.shunxu) {
        currentIndex++;
      } else {
        // 随机播放
        let random = parseInt(
          Math.random() * this.$root.musicStore.musicList.length
        );
        currentIndex = random;
      }
      if (currentIndex >= musicList.length) {
        currentIndex = 0;
      }
      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex];
      this.$root.musicStore.picURL = this.$root.musicStore.currentMusic.al.picUrl;
    },
    play(event) {
      this.isPlay = false;
      this.changePlay();
      this.timeUpdate(event);
      // console.log(this.$root.musicStore.currentMusic.name);
    },
    pause(event) {
      this.isPlay = true;
      this.changePlay();
      this.timeUpdate(event);
    },
    changeTime(event) {
      let time = event.target.value;
      this.currentTime = time;
      this.$refs.audio.currentTime = time;
    },
    changePlay() {
      let audio = this.$refs.audio;
      let songImg = null;
      let randimg = this.$refs.randImg;
      console.log(randimg)
      if (this.isFullPage) {
        songImg = this.$refs.songImg;
      }
      
      if (this.isPlay) {
        audio.pause();
        this.isPlay = false;
        randimg.style.animationPlayState = "paused";
        if (this.isFullPage&&songImg) {
          songImg.style.animationPlayState = "paused";
        }
      } else {
        audio.play();
        this.isPlay = true;
        randimg.style.animationPlayState = "running";
        if (this.isFullPage&&songImg) {
          songImg.style.animationPlayState = "running";
        }
      }
      
    },
    timeUpdate(event) {
      let audio = event.target;
      // 当前播放时间
      let currentTime = audio.currentTime;
      // 音乐总时长
      let duration = audio.duration;
      this.currentTime = currentTime;
      this.duration = duration;
      this.drawCicle(currentTime, duration);
      if (this.lyric) {
        for (var i = 0; i < this.lyric.length; i++) {
          // 最后一条直接高i亮
          if (i >= this.lyric.length - 1) {
            this.currentIndex = i;
            break;
          }
          //当前播放时间 大于歌词时间 小于下一条歌词时间，当前这条歌词需要高亮
          if (
            this.lyric[i].time < currentTime &&
            currentTime < this.lyric[i + 1].time
          ) {
            this.currentIndex = i;
            break;
          }
        }
      }

      if (this.currentIndex < 7) {
        this.transY = "translateY(0px)";
      } else if (this.currentIndex >= 7) {
        this.transY = "translateY(" + -33 * (this.currentIndex - 6) + "px)";
      }
    },
    drawCicle(currentTime, duration) {
      if (this.$refs.processBtn) {
        let canvas = this.$refs.processBtn.getContext("2d");
        canvas.clearRect(0, 0, 50, 50);
        canvas.beginPath();
        canvas.strokeStyle = "#5e0f0f";
        canvas.lineWidth = 5;
        canvas.arc(25, 25, 20, 0, 2 * Math.PI);
        canvas.stroke();
        canvas.closePath();

        canvas.beginPath();
        canvas.strokeStyle = "#cc99cc";
        canvas.lineWidth = 5;
        canvas.arc(
          25,
          25,
          20,
          0,
          2 * Math.PI * parseFloat(currentTime / duration)
        );
        canvas.stroke();
        canvas.closePath();
        canvas.beginPath();
        canvas.fillStyle = "#5e0f0f";

        let str = "|| ";
        if (!this.isPlay) {
          str = "▶";
        }
        canvas.font = "bold 18pt Calibri";
        canvas.fillText(str, 15, 32);
        canvas.closePath();
      }
    },
  },
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
}
.player {
  position: fixed;
  z-index: 99;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  // border-radius: 27px;
  overflow: hidden;
  margin-bottom: 3px;
  audio {
    height: 50px;
  }
  .playBar {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: #d8a9e3;
    // width: 382px;
    i {
      &:first-of-type {
        // flex: 1;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        animation: randImg 5s linear 0s infinite;
        img {
          width: 100%;
        }
      }
      &:nth-of-type(2) {
        flex: 1;
        text-align: center;
        font-style: normal;
        color: #5e0f0f;
        font-size: 18px;
        font-weight: 600;
      }
      &:last-of-type {
        // flex: 1;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
  }

  .fullPage {
    width: 100vw;
    height: 100vh;
    // background-color: #2bc3d0;
    position: relative;

    .playbg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      z-index: -1;
      background-color: black;
      img {
        width: 200%;
        // opacity: 0.3;
        filter: blur(20px);
      }
      .cover {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0px;
        left: 0px;
      }
    }
    p {
      text-align: left;
      width: 70px;
      margin: 0;
      padding: 5px 10px;
      border-radius: 25px;
      color: white;
    }
    .changePage {
      color: white;
      margin-bottom: 20px;
      span {
        padding: 10px 10px;
      }
      .changeActive {
        color: #94b4d4;
        // font-weight: 800;
        font-size: 18px;
      }
    }
    .gequ {
      height: 70%;
      .budong {
        //  animation-play-state: paused ;
        animation: randImg 8s linear 0s infinite;
      }
      .songImg {
        margin-top: 40px;
        height: 65%;

        img {
          height: 100%;
          border-radius: 50%;
          box-shadow: 0px 0px 7px white;
        }
      }
      .songName {
        margin-top: 20px;
        margin-bottom: 10px;
        color: #cc99cc;
        font-size: 22px;
      }
      .artist {
        margin-top: 16px;
        color: #e8e4e4;
      }
      .source {
        color: #e8e4e4;
        margin-top: 5px;
      }
    }
    .geci {
      height: 73%;
      .songName {
        margin-top: 16px;
        margin-bottom: 10px;
        font-size: 22px;
        color: #cc99cc;
      }
      .lyric {
        margin-top: 24px;
        margin-bottom: 15px;
        height: 78%;
        // overflow: hidden;
          overflow: auto;

        padding: 0px 30px;
        box-sizing: border-box;
        ul {
          padding: 0px;
          li {
            font-size: 16px;
            line-height: 33px;
            color: white;
          }
          .active {
            color: #cc99cc;
            font-size: 1.3rem;
          }
        }
      }
    }

    .progress {
      margin: 1px auto;
      // width: 95%;
      span {
        color: white;
        padding: 0px 3px;
      }
      input {
        width: 70%;
      }
    }

    .controlBar {
      button {
        // text-align: center;
        width: 40px;
        height: 40px;
        outline: none;
        background-color: transparent;
        color: white;
        border: none;
        overflow: hidden;
        position: relative;
        margin: 10px;
        border-radius: 10px;
        i {
          font-size: 43px;
          font-style: normal;
          position: absolute;
          top: 0px;
          left: 0px;
        }
      }
      button:active {
        outline: none;
      }
      .bofang {
        // background-color: white;
        width: 40px;
        height: 40px;
        margin: 0px;
        i {
          top: -7px;
          left: 1px;
        }
        img {
          width: 28px;
        }
      }
      .pre {
        margin-left: 20px;
      }
      .changeplay {
        i {
          // font-size: 28px;
          // font-weight: 800;
          top: -5px;
          left: -4px;
        }
      }
      .songsheet {
        height: 50px;
        font-size: 19px;
        margin: 0px 0px;
        padding-top: 10px;
        line-height: 40px;
        i {
          font-size: 16px;
          top: 18px;
          left: 20px;
        }
      }
    }
    .playList {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background-color: white;
      bottom: 0px;
      left: 0px;
      p {
        color: black;
        float: left;
        width: 0;
        margin: 5px;
      }
      h5 {
        margin-top: 10px;
        margin-left: 50%;
        transform: translateX(-50%);
        width: 100px;
        font-size: 16px;
        text-align: center;
        // background-color: red;
      }
      ul {
        padding-top: 10px;
        margin-bottom: 30px;
        height: 86%;

        overflow: auto;

        li {
          height: 50px;
          // width: 100%;
          // margin-left: 25px;
          margin-top: 10px;
          text-align: left;
          padding-right: 10px;
          box-sizing: border-box;

          .sheetStyle {
            height: 100%;
            border-bottom: 1px solid #eee;
            .nameStyle {
              margin: 6px 0px;
              width: 85%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .detailStyle {
              color: #aaa;
              font-size: 12px;
              width: 85%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              padding: 0px;
              .u-hmsprt {
                background: url(../assets/index_icon.png) no-repeat;
                background-size: 166px 97px;
                display: inline-block;
                width: 12px;
                height: 8px;
                margin-right: 4px;
              }
            }
          }
        }
        li:hover {
          background-color: #f7f7f7;
        }
      }
    }
  }
}

@keyframes randImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>